display: gridの挙動

列を指定

grid-template-columns: 1fr 1fr 1fr;

gapを指定

gap: 10px 20px;

要素の指定

一列目から三列目まで指定

grid-column: 1 / 3;

複数あったら、次の

順次、２列分

grid-column: span 2;

末尾などで２列なかったときは、次に送られる

１列目から、全列

grid-column: 1 / -1;

位置を縦横で指定

code:hoge.css

.item {

grid-column: 2 / 4;

grid-row: 1 / 3;

}

他と重なったらzIndexで順序を変えられる

自動の埋め方のやりかた

grid-auto-flow: dense;

高さ

最大の要素が選ばれる